<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Fixture Gallery</title>
    <link rel="stylesheet" type="text/css" href="fitweb.css"/>
    <script type="text/javascript" src="support.js"></script>
    <script type="text/javascript" src="editor.js"></script>
    <style type="text/css">
        .panel {
            margin-top: 0;
            padding: 10px;
            background-color: #e6e6e6;
            width: 500px;
            border: 1px solid #999999;
        }

        .code {
            font-family: monospace;
            background-color: #f0f8ff;
        }
    </style>
</head>
<body>
<h1 class="title" onclick="toggle();">Fixture Gallery</h1>
<table class="pageFixture">
    <tr>
        <td>org.fitweb.fixture.WebFixture</td>
    </tr>
</table>
<h2>HTML</h2>
<table class="setup">
    <tr>
        <td>define element</td>
        <td class="name">Pet's Name</td>
        <td>as</td>
        <td>//li/input[@name='pet']</td>
    </tr>
</table>
<table>
    <tr>
        <td>browse</td>
        <td>file://${user.dir}/tests/data/example.html</td>
    </tr>
</table>
<table>
    <tr>
        <td>assert</td>
        <td class="name">Title</td>
        <td>contains</td>
        <td class="value">Example HTML Page</td>
    </tr>
    <tr>
        <td>assert</td>
        <td class="name">Pet's Name</td>
        <td>does not contain</td>
        <td class="value">Cujo</td>
    </tr>
</table>
<div><br/>Given some fields like this: <span class="code">&lt;input type="text" name="first_name" value="John"/&gt;</span></div>
<table class="setup left">
    <tr>
        <td colspan="2">set fields</td>
    </tr>
    <tr class="setup">
        <td class="name">name</td>
        <td class="name">value</td>
    </tr>
    <tr>
        <td>first_name</td>
        <td>John</td>
    </tr>
    <tr>
        <td>surname</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>rank</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>serial_number</td>
        <td>5318008</td>
    </tr>
</table>
<table class="left">
    <tr>
        <td colspan="2">check fields</td>
    </tr>
    <tr class="setup">
        <td class="name">name</td>
        <td class="name">value</td>
    </tr>
    <tr>
        <td>pet</td>
        <td>Boris</td>
    </tr>
    <tr>
        <td>number</td>
        <td>64</td>
    </tr>
    <tr>
        <td>first_name</td>
        <td>John</td>
    </tr>
</table>
<div style="clear: both"></div>

<h2>XML</h2>

<div class="panel">
    <b>Note:</b> ensure that the FitWeb jar is earlier in the classpath than the HtmlUnit jar (in the webdriver library
    folder). This fixes a weakness in HtmlUnit, which does not allow the same level of interaction with XML data.
</div>
<table class="setup">
    <tr>
        <td>define element</td>
        <td class="name">Item One Name</td>
        <td>as</td>
        <td>//item[@uniqueId='1']/name</td>
    </tr>
    <tr>
        <td>define element</td>
        <td class="name">Item Two</td>
        <td>as</td>
        <td>//item[@uniqueId='2']</td>
    </tr>
</table>
<table>
    <tr>
        <td>browse</td>
        <td>file://${user.dir}/tests/data/example.xml</td>
    </tr>
</table>
<table>
    <tr>
        <td>assert</td>
        <td class="name">Page</td>
        <td>contains</td>
        <td class="value">A little like the one above</td>
    </tr>
    <tr>
        <td>assert</td>
        <td class="name">Item One Name</td>
        <td>contains</td>
        <td class="value">example item 1</td>
    </tr>
    <tr>
        <td>assert</td>
        <td class="name">Item Two</td>
        <td>contains xml</td>
        <td class="value">
            &lt;name&gt;example item 2&lt;/name&gt;
            &lt;description&gt;A little like the one above&lt;/description&gt;
        </td>
    </tr>
</table>
<h2>JSON</h2>
<table>
    <tr>
        <td>browse</td>
        <td>file://${user.dir}/tests/data/example.json</td>
    </tr>
</table>
<br/>Note that arrays are one-indexed, from the W3C XPath standard, however wrong it feels.
<table>
    <tr>
        <td colspan="2">json values</td>
    </tr>
    <tr class="setup">
        <td class="name">name</td>
        <td class="name">value()</td>
    </tr>
    <tr>
        <td>surname</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>address/street</td>
        <td>Coastal Boulevard</td>
    </tr>
    <tr>
        <td>favouriteColours[2]</td>
        <td>green</td>
    </tr>
</table>
<h2>Ajax</h2>
<table class="setup">
    <tr>
        <td>define element</td>
        <td class="name">Input Field</td>
        <td>as</td>
        <td>//input[@name='textfield']</td>
    </tr>
    <tr>
        <td>define element</td>
        <td class="name">Output Field</td>
        <td>as</td>
        <td>//input[@name='label']</td>
    </tr>
    <tr>
        <td>define element</td>
        <td class="name">Fake AJAX Button</td>
        <td>as</td>
        <td>//input[@name='submitButton']</td>
    </tr>
</table>
<table>
    <tr>
        <td>browse</td>
        <td>file://${user.dir}/tests/data/example.html</td>
    </tr>
</table>
<table>
    <tr>
        <td>into</td>
        <td class="name">Input Field</td>
        <td>enter</td>
        <td class="value">Important Data</td>
    </tr>
    <tr>
        <td>click</td>
        <td class="name" colspan="3">Fake AJAX Button</td>
    </tr>
    <tr>
        <td>wait for</td>
        <td class="name">Input Field</td>
        <td>to contain</td>
        <td class="value">Sleeping ...</td>
    </tr>
    <tr>
        <td>wait for</td>
        <td class="name">Output Field</td>
        <td>to contain</td>
        <td class="value">Important Data</td>
    </tr>
</table>
<h2>General Assertions</h2>
<table class="setup">
    <tr>
        <td>define element</td>
        <td class="name">First list items</td>
        <td>as</td>
        <td>//ul[@id='sausage']/li</td>
    </tr>
</table>
<table>
    <tr>
        <td>assert</td>
        <td class="name">First list items</td>
        <td>has size<br></td>
        <td class="value">3<br></td>
    </tr>
</table>
<table class="setup">
    <tr>
        <td>define element</td>
        <td class="name">Delete hard drive button</td>
        <td>as</td>
        <td>//input[@name='deleteHDD']</td>
    </tr>
</table>
<table>
    <tr>
        <td>assert</td>
        <td class="name">Fake AJAX Button</td>
        <td>is</td>
        <td class="value">visible</td>
    </tr>
</table>
Note that invisible items must still exist on the page to qualify for invisibility.
<table>
    <tr>
        <td>assert</td>
        <td class="name">Delete hard drive button</td>
        <td>is not</td>
        <td class="value">visible</td>
    </tr>
</table>
<h2>Other Features</h2>

<h3>Webserver interaction</h3>
Start an instance of your preferred webserver, or check that one is available:
<table>
    <tr>
        <td>start server</td>
        <td>org.fitweb.examples.ExampleWebServerProvider</td>
        <td>on port</td>
        <td>8008</td>
    </tr>
</table>
... and stop it again:
<table>
    <tr>
        <td>stop server on port</td>
        <td>8008</td>
    </tr>
</table>
<h3>Status Codes</h3>
Not yet supported in IE and FireFox
<table>
    <tr>
        <td>browse</td>
        <td>file://${user.dir}/tests/data/example.html</td>
    </tr>
</table>
<table>
    <tr>
        <td>assert status code is</td>
        <td class="value">200</td>
    </tr>
</table>
<h3>Proxy configuration</h3>
WebDriver uses the default proxy in IE and FireFox. In HtmlUnit, you can specifically set the proxy to use.
<div style="clear: both"></div>
<b class="left" style="margin: 15px">If this happens:</b>
<table class="left">
    <tr style="visibility: hidden; display: none">
        <td>ignore</td>
    </tr>
    <tr>
        <td class="error">browse</td>
        <td>http://some.external-site.com/</td>
    </tr>
</table>
<b class="left" style="margin: 15px">try this first:</b>
<table class="left">
    <tr>
        <td>set proxy to</td>
        <td>my.proxy.server</td>
        <td>on port</td>
        <td>8080</td>
    </tr>
</table>
<div style="clear: both"></div>
<h3>HTTP Request and Response Headers</h3>
Not yet supported in IE and FireFox
<table class="setup">
    <tr>
        <td colspan="2">set request headers</td>
    </tr>
    <tr class="setup">
        <td class="name">name</td>
        <td class="name">value</td>
    </tr>
    <tr>
        <td>User-Agent</td>
        <td>Nasty little IE browser</td>
    </tr>
    <tr>
        <td>Accept-Encoding</td>
        <td>gzip,deflate</td>
    </tr>
</table>
<h3>Ignoring Unfinished Fixture</h3>
This is not for developers. This is for BAs who have documented a spec and want to check it in.
<table>
    <tr>
        <td>ignore</td>
    </tr>
    <tr>
        <td class="name">run</td>
        <td class="value">some future process</td>
    </tr>
</table>
<table style="margin-top: 20px">
    <tr>
        <td class="name" colspan="2">summary</td>
    </tr>
</table>
</body>
</html>